<template>
  <div v-if="visible">
    <el-dialog :visible.sync="visible"
               :title="dataFormTitle"
               :modal="false"
               width="40%"
               class="user-dialog add-or-updata"
               :before-close="closeDialog"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <el-form :model="dataForm"
               v-loading="dataListLoading"
               :element-loading-text="$t('loading')"
               ref="dataForm"
               label-position="left"
               @keyup.enter.native="dataFormSubmitHandle()"
               label-width="120px">
        <!-- <div> -->
        <el-row>
          <el-col>
            <el-form-item prop="id"
                          label="设备模板ID">
              <el-input v-model="dataForm.id"
                        disabled
                        placeholder="系统自动生成"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item prop="name"
                          label="设备模板名称">
              <el-input v-model="dataForm.name"
                        placeholder="请输入设备模板名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item prop="marks"
                          label="备注">
              <el-input v-model="dataForm.marks"
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item v-for="(distributionLists, index) in attribute"
                          :label="'属性' + (index + 1)"
                          :key="distributionLists.key"
                          style="margin-top: 20px">
              <el-input v-model="distributionLists.type"
                        placeholder="属性标识"
                        style="width: 140px"
                        min="0"></el-input>
              <el-input v-model="distributionLists.name"
                        placeholder="属性名称"
                        style="width: 140px;margin-left:10px"
                        min="0"></el-input>
              <el-button @click.prevent="removeDistributionList(distributionLists)"
                         type="danger"
                         v-if="isLook === true"
                         style="margin-left: 10px">删除</el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="addDistributionList"
                         type="primary"
                         v-if="isLook === true"
                         style="margin-top: 10px">新增属性</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- </div> -->
      </el-form>
      <template slot="footer"
                v-if="isLook === true">
        <el-button @click="closeDialog()">{{ $t("cancel") }}</el-button>
        <el-button type="primary"
                   :loading="dataListLoading"
                   @click="dataFormSubmitHandle()">{{ $t("confirm") }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import minFormValidate from '@/mixins/form-validate'
import debounce from 'lodash/debounce'
export default {
  mixins: [mixinViewModule, minFormValidate],
  data () {
    return {
      mixinViewModuleOptions: {
        deleteImgURL: '',
        getDataListURL: '', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addURL: '/tb/deviceTemplate/insertTemplate', // 添加或修改接口，API地址
        updateURL: '/tb/deviceTemplate/updateTemplate', // 添加或修改接口，API地址
        getDataInfoURL: '/tb/deviceTemplate/getTemplate?id=', // 数据详情，API地址
        deleteURL: '', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '' // 导出接口，API地址
      },
      tempDeleteFileList: [], // 临时删除的文件
      newEditFileList: [], // 保存在编辑时新增的文件路径
      newThumbnailList: [], // 保存在编辑时新增的thumbnail图路径
      tempThumbnailList: [], // 临时删除的thumbnail图的图片
      visible: false,
      dataForm: {
      },
      attribute: [
        {
          type: '',
          name: ''
        } ],
      isLook: true,
      dataFormTitle: ''
    }
  },
  methods: {
    init (data, type) {
      if (data) {
        this.attribute = data.deviceAttributeList
        this.dataForm = data
        this.dataFormTitle = '修改'
        this.isLook = true
        if (type) {
          this.dataFormTitle = '查看'
          this.isLook = false
        }
      } else {
        this.dataForm = {}
        this.dataFormTitle = '新增'
        this.isLook = true
        this.attribute = [{ type: '', name: '' }]
      }
      this.visible = true
    },
    closeDialog () {
    //   this.$refs.dataForm.resetFields()
      this.$emit('callBack')
      this.visible = false
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs.dataForm.validate((valid) => {
          if (valid) {
            // let temp = []
            for (let i = 0; i < this.attribute.length; i++) {
              // let arr = {}
              if (!this.attribute[i].type && !this.attribute[i].name) {
                this.removeDistributionList(this.attribute[i])
              }
              // arr.type = this.attribute.type
              // arr.name = this.attribute.name
              // temp.push(arr)
            }
            this.dataForm.deviceAttributeList = this.attribute
            const url = this.dataForm.id
              ? this.mixinViewModuleOptions.updateURL
              : this.mixinViewModuleOptions.addURL
            this.addOrUpdateItem({ url }).then((res) => {
              if (res.code !== 0) {
                return
              }
              this.$emit('callBack')
              this.closeDialog()
            })
          }
        })
      },
      1000,
      { leading: true, trailing: false }
    ),
    // 删除表单
    removeDistributionList (item) {
      var index = this.attribute.indexOf(item)
      if (index !== -1) {
        this.attribute.splice(index, 1)
      }
    },
    // 新增属性
    addDistributionList () {
      for (let i = 0; i < this.attribute.length; i++) {
        if (!this.attribute[i].type && !this.attribute[i].name) {
          return this.$message.warning('请填写完整的属性后添加')
        }
      }
      this.attribute.push({
        type: '',
        name: ''
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
